<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
	<link href="../resources/masterdetail2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Server rendered content, activated in client. With client data 'delta'...</h3>

<div class="box label">This sample illustrates static content on the page that could have been server-rendered from data.<br />
Activation would be run only if JavaScript is enabled in the browser (simulated here by clicking on the 'Activate' button)<br />
- enabling an 'Unobtrusive JavaScript' approach.</div>
<div class="buttons">
	<button onclick="activate()">Activate</button>
	<button onclick="showData()">show data</button>
	<button onclick="deleteLastLanguage()">delete last language</button>
</div>

<div class="comment">First activate, and then click to select and edit</div>

<div id="movieList">
	<table>
		<thead><tr><th>Title</th><th>Languages</th><th><span id="addMovieBtn">Add</span></th></tr></thead>
		<tbody>
			<tr style="background-color: yellow;" class="hover">
				<td>
					<span>1</span>:
					<span>Meet Joe Black</span>
				</td>
				<td>
					<div>English</div>
					<div>French</div>
				</td>
				<td>
					<img class="close" src="../resources/close.png"></img>
				</td>
			</tr>
			<tr style="background-color: rgb(253, 253, 254);" class="hover">
				<td>
					<span>2</span>:
					<span>Eyes Wide Shut</span>
				</td>
				<td>
					<div>French</div>
					<div>German</div>
					<div>Spanish</div>
				</td>
				<td>
					<img class="close" src="../resources/close.png"></img>
				</td>
			</tr>
		</tbody>
	</table>

	<div class="detail">
		<div>
			<div class="title">Title:</div>
			<div><input value="Meet Jo Black"></div>
			<div class="title">Languages: <span id="addLanguageBtn">Add</span></div>
			<div>
				<input value="English"><img class="close" src="../resources/close.png"></img>
				<input value="French"><img class="close" src="../resources/close.png"></img>
			</div>
		</div>
	</div>
</div>

<script id="movieTemplate" type="text/x-jsrender">
	<table>
		<thead><tr><th>Title</th><th>Languages</th><th><span class="addMovie">Add</span></th></tr></thead>
		<tbody class="movies">
			{^{for movies}}
				<tr class="hover" data-link="css-background-color{:~bgColor()}">
					<td>
						{^{:#index + 1}}: {^{>title}}
					</td>
					<td>
						{^{for languages}}
							<div>{^{>name}}</div>
						{{/for}}
					</td>
					<td>
						<img class="removeMovie" src="../resources/close.png" />
					</td>
				</tr>
			{{/for}}
		</tbody>
	</table>

	<div class="detail">
		{^{for movies[selectedIndex]}}
			<div>
				<div class="title">Title:</div>
				<div><input data-link="title" /></div>
				<div class="title">Languages: <span class="addLanguage">Add</span></div>
				<div>
					{^{for languages}}
						<input data-link="name" /><img class="removeLanguage" src="../resources/close.png" />
					{{/for}}
				</div>
			</div>
		{{/for}}
	</div>
</script>

<script type="text/javascript">
	var counter = 0,
		activated = false,
		movies = [
			{
				title: "Meet Joe Black",
				languages: [
					{ name: "English" },
					{ name: "Extra Language in client data" },
					{ name: "French" }
				]
			},
			{
				title: "Extra Movie in client data",
				languages: [
					{ name: "Latin" },
					{ name: "Greek" }
				]
			},
			{
				title: "Eyes Wide Shut",
				languages: [
					{ name: "French" },
					{ name: "German" },
					{ name: "Spanish" }
				]
			}
		],
		app = {
			selectedIndex: null,
			movies: movies,
			select: function select(index) {
				if (this.selectedIndex !== index) {
					$.observable(this).setProperty("selectedIndex", index);
				}
			}
		};

	$.templates({
		movieTmpl: {
			markup: "#movieTemplate",
			helpers: {
				bgColor: bgColor,
			}
		}
	});

	function bgColor() {
		return (this.ctx.root.selectedIndex === this.index) ? "yellow" : (this.index%2 ? "#fdfdfe" : "#efeff2");
	}
	bgColor.depends = "~root.selectedIndex"

	function activate() {
		if ( activated ) {
			return;
		}
		$.link.movieTmpl("#movieList", app)
			.on("click", ".addMovie", function() {
				$.observable(movies).insert(movies.length, {
					title: "NewTitle" + counter ,
					languages: [
						{ name: "NewLanguage" + counter++ }
					]}
				);
				// Set selection on the added item
				app.select($.view(".movies tr:last").index);
			})

			.on("click", ".movies tr", function() {
				app.select($.view(this).index);
			})

			.on("click", ".removeMovie", function() {
				app.select();
				$.observable(movies).remove($.view(this).index, 1);
				return false;
			})

			.on("click", ".addLanguage", function() {
				var languages = $.view(this).data.languages;
				$.observable(languages).insert(languages.length, {
					name: "NewLanguage" + counter++
				});
			})

			.on("click", ".removeLanguage", function() {
				var view = $.view(this);
				$.observable(view.parent.data).remove(view.index, 1);
				return false;
			});

		// Set selection on the last item
		app.select($.view(".movies tr:last").index);
		activated = true;
	}

	function deleteLastLanguage() {
		if (movies.length) {
			var languages = movies[ movies.length - 1 ].languages;
			$.observable(languages).remove(languages.length - 1, 1);
		}
	}
</script>

<!--================ End of Demo Section ================-->

<!--Console-->

<script id="showData" type="text/x-jsrender">
	<div><b>Movie:</b> {{>title}} <b>languages:</b> {{for languages}} {{>name}}{{/for}}</div>
</script>

<div id="console">
</div>

<script type="text/javascript">
	function showData() {
		$( "#console" ).append("<hr/>");
		$( "#console" ).append( $( "#showData" ).render( movies ));
	}
</script>
</body></html>
